<template>
  <div class="content">
     
      <div class="content-left">
        <ContentNav
          @reload='reload'
          @getid='getid'
          v-if="flag"
        />
      </div>
      <div class="content-right">
        <ShowContent
          :id='id'
          :title='title'
        />
      </div>
  </div>
</template>

<script>
import ShowContent from './ShowContent'
import ContentNav from './ContentNav'
export default {
    name:'Content',
    data(){
      return{
        flag:true,
        id:'',
        title:''
      }
    },
    components:{
      ContentNav,
      ShowContent
    },
    methods:{
      //要进行contentNav强制刷新
      reload(){
        this.flag=false;
        this.$nextTick(()=>{
          this.flag=true;
        })
      },
      getid(data){
        this.id=data.pid;
        this.title=data.name
      },
    }
}
</script>

<style scoped>
.content{
  width: 80%;
  margin: 0 auto;
  margin-top: 10px;
  overflow: hidden;
}
.content-left{
  width: 30%;
  height: 100%;
  float: left;
}
.content-right{
  width: 70%;
  height: 100%;
  float: left;
}
</style>